<template>
  <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="visible">
    <el-form
      ref="dataForm"
      :disabled="flag"
      :model="dataForm"
      :rules="dataRule"
      label-width="80px"
      @keyup.enter.native="dataFormSubmit()"
    >
      <el-form-item label="课程名" prop="courseName">
        <el-input v-model="dataForm.courseName" placeholder="课程名"/>
      </el-form-item>
      <el-form-item :class="{ 'is-required': !dataForm.id }" label="上课老师" prop="teacher">
        <el-select v-model="dataForm.teacher" placeholder="上课老师">
          <el-option
            v-for="item in teachersOptions"
            :key="item._id"
            :label="item.username"
            :value="item._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :class="{ 'is-required': !dataForm.id }" label="学分" prop="credit">
        <el-input v-model="dataForm.credit" type="number" placeholder="学分"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="dataForm.remark" placeholder="备注"/>
      </el-form-item>
    </el-form>
    <div v-if="students.length>0" class="students-wrap">
      <div class="clearfix">
        <div class="title">选课学生</div>
      </div>
      <ul class="student">
        <li v-for="item in students" :key="item._id" class="item">{{ item.username }}</li>
      </ul>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button v-if="!flag" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateUsers, getUsers, addCourse, getUsersLists } from '@/api/manage'
export default {
  data() {
    return {
      id: 0,
      visible: false,
      flag: false,
      students: [],
      dataForm: {
        courseName: '',
        teacher: '',
        credit: '',
        remark: ''
      },
      dataRule: {
        courseName: [
          { required: true, message: '课程名不能为空', trigger: 'blur' }
        ],
        teacher: [
          { required: true, message: '请选择上课老师', trigger: 'blur' }
        ],
        credit: [{ required: true, message: '学分不能为空', trigger: 'blur' }]
      },
      teachersOptions: []
    }
  },
  computed: {
    title() {
      if (this.flag) {
        return '查看'
      }
      if (this.dataForm.id) {
        return '修改'
      }
      return '新增'
    }
  },
  methods: {
    init(row, flag) {
      this.visible = true
      this.flag = flag
      this.getUsers()
      if (row) {
        this.id = row._id
        this.dataForm = row
        if (this.dataForm.students.length > 0) {
          getUsersLists({ students: this.dataForm.students }).then(res => {
            if (res.code === 1) {
              this.students = res.data
            }
          })
        } else {
          this.students = []
        }
      } else {
        this.dataForm.id = 0
        this.students = []
        this.$nextTick(() => {
          this.$refs.dataForm.resetFields()
          this.dataForm = {
            courseName: '',
            teacher: '',
            credit: '',
            remark: ''
          }
        })
      }
    },
    getUsers() {
      const role = 1
      getUsers({
        role
      }).then(res => {
        if (res.code === 1) {
          this.teachersOptions = res.data.userLists
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          if (this.id) {
            updateUsers(this.dataForm).then(res => {
              if (res.code === 1) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                const data = res.data
                this.$message.error(data.msg)
              }
            })
          } else {
            addCourse(this.dataForm).then(res => {
              if (res.code === 1) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                const data = res.data
                this.$message.error(data.msg)
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.students-wrap {
  .title {
    width: 80px;
    text-align: right;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 700;
  }
  .student {
    display: flex;
    .item {
      margin-right: 10px;
    }
  }
}
</style>

